// 加载公共样式
require('../../assets/css/common.less')
// 自己的样式
require('./rundata.less')
const echarts = require('echarts')
//引入tabbar渲染函数
const renderTabbar = require('../../utils/tabbar')
//axios工具类
const request = require('../../utils/request')
//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

// 获取元素
const menber=document.querySelector('.menber')
const kll=document.querySelector('.kll')
const co2=document.querySelector('.co2')
const aa2=document.querySelector('.aa2')
const nu2=document.querySelector('.nu2')
const ava=document.querySelector('#ava')

window.onload = () => {
//   蓝色区

 //获取用户信息
 function getUserInfo() {
    request.get('/api/user/info').then(res => {
      // console.log(res.data);
      let {data,errno}=res.data
      console.log(data);
      if(errno===0){
        render(data)
        console.log(API+data.imgUrl);

      }
   
    })
  }
  getUserInfo()
function render(data){
    menber.textContent=data.duration
    kll.textContent=data.calorie
    co2.textContent=data.calorie
    aa2.textContent=data.clockCount
    nu2.textContent=data.clockCount
    ava.src=API+data.imgUrl


}



    // 壮壮图
    function rendbar() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#bar'));

        // 指定图表的配置项和数据
        let option = {
            title: {
                text: '近7天运动时长'
            },
            //   tooltip: {},
            //   legend: {
            //     data: ['销量']
            //   },
            xAxis: {
                data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20, 12]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    rendbar()
    // 饼图
    function rendpie() {
        let myChart = echarts.init(document.querySelector('#pie'));
        let option = {
            // title: {
            //   text: 'Referer of a Website',
            //   subtext: 'Fake Data',
            //   left: 'center'
            // },
            // tooltip: { 
            //   trigger: 'item'
            // },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 25
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    top: -65,
                    left: 80,
                    radius: '50%',
                    data: [
                        {
                            value: 25, name: '跑步',
                            label: {
                                position: 'inside',
                                color: '#fff',
                                formatter: '{c}%'
                            },
                            itemStyle: {
                                // color: '#58bb92'
                            }
                        },
                        { value: 40, name: '训练',label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%'
                        },
                        itemStyle: {
                            color: '#58bb92'
                        } },
                        { value: 35, name: '骑行' ,label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%'
                        },
                        itemStyle: {
                            // color: '#58bb92'
                        }},

                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);

    }
    rendpie()



}